<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-11-10 16:37:30
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-03-24 14:04:35
 * @FilePath: \global-brain\global-brain-admin\src\views\Shop\Order\components\See.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { PropType, ref, reactive, h } from 'vue'
import { ElButton, ElImage } from 'element-plus'
import { adminCsOrderSeeApi } from '@/api/cs/order'
import { LeeSee } from '@/components/Lee/See'
import { ContentWrap } from '@/components/ContentWrap'
// import { LeeTable2 } from '@/components/Lee/Table'
import { Table } from '@/components/Table'
// import { Dialog } from '@/components/Dialog'
// 获取字典
import { useCache } from '@/hooks/web/useCache'
const { wsCache } = useCache()
const dict: any = wsCache.get('dict')

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<any>>,
    default: () => null
  }
})

const orderData = ref<any>({}) //订单信息
// const incomeData = ref<any>([]) //支付信息（入款单）
const dialogVisible = ref(false)
const snapshotUrl = ref('')
const getOrderSee = async () => {
  const res: any = await adminCsOrderSeeApi({ order_id: props.currentRow.order_id })
    .catch(() => {})
    .finally(() => {})
  if (res) {
    orderData.value = res.data
  }
}

const orderSchema = reactive<any[]>([
  {
    field: 'order_id',
    label: '主键'
  },
  {
    field: 'order_sn',
    label: '订单编号'
  },
  {
    field: 'shop_name',
    label: '店铺名称'
  },
  {
    field: 'user_name',
    label: '用户姓名'
  },
  {
    field: 'payable_price',
    label: '应付金额'
  },
  {
    field: 'paid_price',
    label: '实付金额'
  },
  {
    field: 'order_status',
    label: '订单状态',
    component: 'Dict',
    componentProps: { options: dict.shop_order_status }
  },
  {
    field: 'pay_status',
    label: '支付状态',
    component: 'Dict',
    componentProps: { options: dict.shop_pay_status }
  },
  {
    field: 'is_aftercare',
    label: '是否售后',
    component: 'Dict',
    componentProps: { options: dict.is }
  },
  {
    field: 'aftercare_status',
    label: '售后状态',
    component: 'Dict',
    componentProps: { options: dict.shop_aftercare_status }
  },
  {
    field: 'aftercare_type',
    label: '售后类型',
    component: 'Dict',
    componentProps: { options: dict.shop_aftercare_type }
  },
  {
    field: 'postscript',
    label: '补充信息',
    span: 2
  },
  {
    field: 'create_time',
    label: '创建时间'
  },
  {
    field: 'payment_time',
    label: '付款时间'
  },
  {
    field: 'transaction_time',
    label: '成交时间'
  }
])

const goodsSchema = reactive<any[]>([
  {
    field: 'goods_thumbnail',
    label: '缩略图',
    component: 'Image',
    formatter: (_: Recordable, __: TableColumn, cellValue: number | string) => {
      return cellValue != ''
        ? h(
            ElImage,
            {
              src: cellValue
            },
            () => ''
          )
        : ''
    },
    width: 160,
    fixed: 'left'
  },
  {
    field: 'goods_name',
    label: '商品名称',
    'min-width': 160
  },
  {
    field: 'goods_sn',
    label: '商品编号',
    width: 160
  },

  {
    field: 'goods_sku_specs',
    label: '规格',
    width: 160
  },
  {
    field: 'goods_number',
    label: '商品数量',
    width: 160
  },
  {
    field: 'goods_price',
    label: '商品价格',
    width: 100,
    fixed: 'right'
  },
  {
    field: 'action',
    width: 120,
    fixed: 'right',
    label: '操作'
  }
])

const sendSchema = reactive<any[]>([
  {
    field: 'logistics_sn',
    label: '物流单号'
  },
  {
    field: 'logistics_company',
    label: '物流公司'
  },
  {
    field: 'consignor',
    label: '发货人'
  },
  {
    field: 'consignor_mobile',
    label: '发货人电话'
  },
  {
    field: 'consignor_province',
    label: '发货人省份'
  },
  {
    field: 'consignor_city',
    label: '发货人城市'
  },
  {
    field: 'consignor_district',
    label: '发货人地区'
  },
  // {
  //     field: 'consignor_street',
  //   label: '发货人街道'
  // },
  {
    field: 'consignor_address',
    label: '发货人地址'
  },
  {
    field: 'consignor_address_id',
    label: '发货地址ID'
  },
  {
    field: 'consignee',
    label: '收货人'
  },
  {
    field: 'consignee_mobile',
    label: '收货人电话'
  },
  {
    field: 'consignee_province',
    label: '收货人省份'
  },
  {
    field: 'consignee_city',
    label: '收货人城市'
  },
  {
    field: 'consignee_district',
    label: '收货人地区'
  },
  // {
  //   field: 'consignee_street',
  //   label: '收货人街道'
  // },
  {
    field: 'consignee_address',
    label: '收货人地址'
  },
  {
    field: 'consignee_address_id',
    label: '收货地址ID'
  },
  {
    field: 'delivery_time',
    label: '发货时间'
  },
  {
    field: 'arrival_time',
    label: '到货时间'
  }
])

// const fileSchema = reactive<any[]>([
//   {
//     field: 'img_url',
//     label: '凭证图片',
//     width: 160,
//     component: 'Image',
//     fixed: 'left'
//   },
//   {
//     field: 'type',
//     label: '凭证类型',
//     component: 'Dict',
//     componentProps: { options: dict.cs_order_file_type }
//   },
//   {
//     field: 'create_time',
//     label: '创建时间',
//     width: 180
//   }
// ])

// const onUrl = (url) => {
//   let openUrl = url
//   window.open(openUrl, '_blank')
// }

const action = async (type: string, row: any = {}) => {
  switch (type) {
    case 'seeSnapshot':
      dialogVisible.value = true
      let url =
        import.meta.env.VITE_SHOP_URL +
        '#/buyer/snapshotSee?order_id=' +
        row.order_id +
        '&goods_id=' +
        row.goods_id
      // onUrl(url)
      snapshotUrl.value = url
      break
    default:
      console.log('未知类型')
  }
}

/****************************** 初始化 start ******************************/

const init = async () => {
  // 先调订单查看详情接口
  await getOrderSee()
}
init()

/****************************** 初始化 end ******************************/
</script>

<template>
  <div class="p-10px">
    <ContentWrap title="订单信息">
      <LeeSee :schema="orderSchema" :data="orderData" :column="2" />
    </ContentWrap>

    <ContentWrap title="商品信息">
      <Table :columns="goodsSchema" :data="orderData.order_goods" :selection="false">
        <template #action="{ row }">
          <ElButton type="success" title="查看快照" @click="action('seeSnapshot', row)">
            查看快照
          </ElButton>
        </template>
      </Table>
    </ContentWrap>

    <ContentWrap title="发货信息">
      <LeeSee :schema="sendSchema" :data="orderData" />
    </ContentWrap>

    <!-- <ContentWrap title="支付信息">
      <LeeTable2 :schema="incomeSchema" :data="incomeData" :isSelection="false" />
    </ContentWrap> -->

    <!-- <ContentWrap title="附件信息">
      <LeeTable2 :schema="fileSchema" :data="orderData.fileData" :isSelection="false" />
    </ContentWrap> -->

    <!-- <Dialog v-model="dialogVisible" title="商品快照">
      <iframe src="snapshotUrl" />

      <template #footer>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </Dialog> -->

    <!-- <ElDialog v-model="dialogVisible" title="商品快照" width="415px" top="30px" lock-scroll>
      <iframe :src="snapshotUrl" width="375px" height="650px"></iframe>
      <template #footer>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </ElDialog> -->
  </div>
</template>
